<template>
  <div class="is-use" v-if="!isGenerate">
   

    <div class="left-content">
      <!-- 复制 -->
      <div class="is-use-content" @click="isUseFun('copyText')">
        <span class="icon"></span>
      </div>
      <!-- 刷新 -->
      <div class="is-use-content" @click="isUseFun('refresh')">
        <span class="icon"></span>
      </div>
      <div class="is-use-content" @click="isUseFun('click_use', index)">
        <span :class="['icon', itemDataIsUse.click_use==1 ? 'iconFalse' : '']"></span>
      </div>
      <div class="is-use-content" @click="isUseFun('click_noUse',index)">
        <span :class="['icon', itemDataIsUse.click_noUse==1  ? 'iconNoFalse' : '']"></span>
      </div>
    </div>
    <div class="right-content">
      <div class="is-sc-content">
        <span
          :class="['icon', !isflagCollectIs ? 'icon-xin1' : 'icon-xin']"
          @click="collectFun"
        ></span>
      </div>
      <!-- , !isShare ? 'iconNoFalse' : '' -->
      <div class="is-sc-content" @click="kefu">
        <span :class="['icon-share']" @click="isUseFun('click_share')"></span>
        <span class="icons">转客服</span>
      </div>
    </div>
    <!--告诉我们更多  -->
    <!-- <van-popup
      v-model="showMore"
      closeable
      close-icon="close"
      position="bottom"
      :style="{ height: '415px' }"
    >
      <div class="title">告诉我们更多</div>
      <div class="checkOutbox">
        <van-checkbox-group v-model="result" class="checkbox">
          <van-checkbox shape="square" name="a">没能理解问题</van-checkbox>
          <van-checkbox shape="square" name="b">无法理解上下文</van-checkbox>
          <van-checkbox shape="square" name="b">信息不准确</van-checkbox>
          <van-checkbox shape="square" name="b">评价不合理</van-checkbox>
          <van-checkbox shape="square" name="b">回答格式不够好</van-checkbox>
          <van-checkbox shape="square" name="b">拒绝回答我的问题</van-checkbox>
          <van-checkbox shape="square" name="b">存在价值观问题</van-checkbox>
        </van-checkbox-group>
        <textarea
          v-model="questionVal"
          placeholder="我们想了解你不满意的原因，你也可以提供一个更好的答案来帮助我们改进。"
          class="textContent"
        ></textarea>
      </div>
      <div class="submitBox">
        <van-button type="primary" class="btnPrimary" @click="submit"
          >提交</van-button
        >
      </div>
    </van-popup> -->
   
  </div>
</template>

<script>
import {
  getUrlParams,
  _getRandomUserId,
  _getSessionCode,
  _getSessionId,
  getRandomStr,
  getReqid,
  openService,
  copyText,
} from "@/utils/common";
import { Toast } from "vant";
import commonFunc from "@/utils/ysjh";
export default {
  data() {
    return {
      showPopover: false,
      result: [],
      showMore: false,
      flag: 0,
      questionVal: "",
      flagLock: false,
      isflagCollect: false,
      // 收藏状态
      flagH: false,
      showflags: false,
      collectionArr: [],
      showPopoverList: [], // 👈 用于存每一条的 popover 显示状态
    };
  },
  props: {
    isShowUse: {
      type: [Boolean],
      default: true,
    },
    isShowNoUse: {
      type: [Boolean],
      default: true,
    },
    isShare: {
      type: [Boolean],
      default: true,
    },
    answer: {
      type: Array,
      default: () => [],
    },
    isCollect: {
      // todo 历史数据是否收藏
      type: Boolean,
      default: false,
    },
    isflagCollectIs: {
      type: Boolean,
      default: false,
    },
    
    question: {
      type: String,
      default: "",
    },
    history: {
      type: Boolean,
      default: false,
    },
    isGenerate: {
      type: [Boolean],
      default: true,
    },
    index: {
      type: [String, Number],
      default: "0",
    },
    itemDataIsUse: {
      type: Object,
      default: {},
    },
  },
  watch: {
    question: {
      immediate: true,
      handler(newVal) {
        if (newVal) {
          if (this.collectionArr.includes(newVal)) {
            this.isflagCollect = true;
          } else {
            this.isflagCollect = false;
          }
        }
      },
    },
  },
  mounted() {},
  created() {
    if (this.isCollectFun) {
      // 先检查方法是否存在
      this.isCollectFun();
    }
  },
  methods: {
    submit() {
      this.showMore = false;
    },
    //转客服
    kefu() {
      console.log(this.question, "question");
      commonFunc.openService("", "", "KDS_ZXKF", {
        client_question: this.question,
        isChat: true,
      });
    },
  
   
    isUseFun(clickType, index) {
      
      // if (clickType === "click_noUse") {
      //   this.showMore = true;
      // }

      if (clickType == "click_use"||clickType == "click_noUse") {
        
        this.$parent.$parent.isUseFun(clickType,index)
        return
      }
      // if (clickType == "click_noUse") {
      //   return (this.isShowNoUse = this.$parent.$parent.isUseFun(
      //     clickType,
      //     ""
      //   ));
      // }
      this.$emit("isUseFun", clickType, index);
    },
    // 收藏接口
    collectFun() {
      const type = this.isflagCollectIs ? "collect" : "noCollect";
      // console.log(this.isflagCollect, "isflagCollect");
       this.$parent.$parent.collectionFun(type, this.question);
    },
  },
};
</script>

<style lang="less" scoped>
.collectOutbox {
  width: 100%;
  padding-top: 60px;
  background: url("@/assets/images/dailogcollect.png") no-repeat center center;
  background-size: 100% 100%;
  // background-color: #f6eff8;
}
::v-deep .cancel {
  display: flex;
  align-item: center;
  flex-wrap: nowrap;
  color: #232428;
  font-size: 13px;
  line-height: 20px;
  padding: 17px 20px;
}
.deleteIcon {
  display: flex;
  width: 14px;
  height: 14px;
  background: url("@/assets/images/sc_bottomdelet.png") no-repeat center center;
  background-size: contain;
}
.collectList {
  height: 300px;
  padding: 5px 15px;
  padding-bottom: 40px !important;
  box-sizing: border-box;
  overflow: auto;
  background: url("@/assets/images/dailogcollect.png") no-repeat center center;
  background-size: 100% 100%;
  // background-color: #f6eff8;
  .collectItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    width: 90%;
    padding: 15px 12px;
    color: #232428;
    font-weight: bold;
    font-size: 15px;
    border-radius: 15px;
    margin-bottom: 10px;
    background: linear-gradient(
      270deg,
      #ffffff99 0%,
      #ffffff66 51%,
      #ffffff7f 100%
    );
    .itemLeftBox {
      display: flex;
      align-items: center;
      .collectIcon {
        display: flex;
        width: 10px;
        height: 10px;
        background: url("@/assets/images/sc_bottomicon.png") no-repeat center
          center;
        background-size: contain;
        padding-left: 12px;
      }
      .collectText {
        line-height: 20px;
        font-size: 15px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #232428;
      }
    }

    .moreIcon {
      width: 24px;
      height: 24px;
      background: url("@/assets/images/sc_bottomslh.png") no-repeat center
        center;
      background-size: contain;
    }
  }
}
.submitBox {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: url("@/assets/images/dailogcollect.png") no-repeat center center;
  background-size: 100% 100%;
  // background-color: #fff;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  justify-content: center;
  .btnPrimary {
    width: 90%;
    height: 46px;
    background: #0883f1;
    border-radius: 12px;
  }
}
.checkOutbox {
  width: 100%;
  height: 100%;
  padding-bottom: 150px;
  background-color: #fefefe;
}
.checkbox {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  padding: 17px;
  margin-top: 45px;
  background-color: #fefefe;
}
.checkbox .van-checkbox {
  white-space: nowrap;
}
.title {
  position: fixed;
  left: 50%;
  // width: 100%;
  height: 30px;
  z-index: 1000;
  transform: translateX(-50%);
  text-align: center;
  color: #333333;
  font-weight: bold;
  font-size: 16px;
  line-height: 26px;
  padding-top: 13px;
  padding-bottom: 13px;
  // background-color: #f3f1fa;
}
.textContent {
  width: 325px;
  height: 245px;
  border-radius: 15px;
  border: 1px solid #9999994c;
  margin-left: 15px;
  padding: 12px 15px;
}
.is-use {
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  // border-radius: 0px 0px 12px 12px;
  padding-bottom: 5px;
  .left-content {
    display: flex;
    justify-content: start;
    .is-use-content {
      width: 30px;
      height: 20px;
      // border-radius: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 3px 0px 3px 10px;
      font-size: 14px;
      margin: 5px 0px;
      white-space: nowrap;
      .icon {
        display: flex;
        width: 20px;
        height: 20px;
        margin-right: 0px;
      }
      &:nth-child(1) .icon {
        background: url("@/assets/images/copy.png") no-repeat center center;
        background-size: contain;
        background-color: #fff;
      }
      &:nth-child(2) .icon {
        background: url("@/assets/images/refresh.png") no-repeat center center;
        background-size: contain;
        background-color: #fff;
      }
      &:nth-child(3) .icon {
        background: url("@/assets/images/do2wnload.png") no-repeat center center;
        background-size: contain;
        background-color: #fff;
      }
      &:nth-child(3) .iconFalse {
        background: url("@/assets/images/dow234nload.png") no-repeat center
          center;
        background-size: contain;
        background-color: #fff;
      }
      &:nth-child(4) .icon {
        background: url("@/assets/images/downl1oad.png") no-repeat center center;
        background-size: contain;
        background-color: #fff;
      }
      &:nth-child(4) .iconNoFalse {
        background: url("@/assets/images/d345ownload.png") no-repeat center
          center;
        background-size: contain;
        background-color: #fff;
      }
    }
  }
  .right-content {
    display: flex;
    justify-content: flex-end;
    padding-right: 15px;
    .is-sc-content {
      // width: 30px;
      height: 20px;
      // border-radius: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 3px 0px 3px 10px;
      font-size: 14px;
      margin: 5px 0px;
      white-space: nowrap;
      .icon {
        display: flex;
        width: 20px;
        height: 20px;
        margin-right: 0px;
      }
      .icon-xin {
        background: url("@/assets/images/xinxin1.png") no-repeat center center;
        background-size: contain;
        background-color: #fff;
      }
      .icon-xin1 {
        background: url("@/assets/images/xinxin.png") no-repeat center center;
        background-size: contain;
        background-color: #fff;
      }
      .icon-share {
        display: flex;
        width: 20px;
        height: 20px;
        margin-right: 0px;
        background: url("@/assets/images/kefu.png") no-repeat center center;
        background-size: contain;
        background-color: #fff;
      }
      .icons {
        vertical-align: middle;
        font-size: 14px;
        line-height: 15px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        margin-left: 2px;
      }
    }
  }
}
.van-cell {
  padding: 10px 7px !important;
}
</style>
